<template>
	<view class="bgc">
		<!-- 切换栏 -->
		<view class="navList">
		<view class="box">
			<view @click="changeNav(index)" v-for="(item,index) in navList" :key="index" :class="{'start':index==navIndex}">{{item}}</view>
		</view>
		</view>
		<!-- 列表 -->
		<view class="listBox" @touchstart="start"  @touchend="end">
			<view class="MealBox" v-for="(item,index) in orderList" :key="index">
				<view class="top">
					<view class="left">
						<view class="Name">{{item.category.cate_name}}</view>
						<view class="keyword">{{item.category.title}}</view>
					</view>
					<view class="right">
						<view class="active">
							{{item.status==1?'进行中':(item.status==2?'已取消':'已完成')}}
						</view>
						<view v-if="item.status==1" @click="_cancelOrder(index,item.id)" class="cancle">取消</view>
					</view>
				</view>
				<view class="address">
					<!-- {{item.category.province.name}}  -->
					{{item.category.city.name}}
					{{item.category.area.name}}
					{{item.category.address}}
				</view>
			</view>
			<view class="noMore" v-show="all">没有更多订单</view>
		</view>
		<!-- #ifdef H5 -->
		<login-by-pc v-if="!loginState" @showOrHide="showOrHide"></login-by-pc>
		<!-- #endif -->
	</view>
</template>

<script>
	import {getOrderList,cancelOrder} from '../../service/order.js';
	// #ifdef H5
		import loginByPc from '@/components/loginByPc/loginByPc.vue'
	// #endif
	export default {
		name: "Order",
		// #ifdef H5
		components: {
			loginByPc
		},
			// #endif
		data() {
			return {
				navIndex: 0,
				navList: ['全部', '进行中', '已取消', '已结束'],
				orderList: [],
				page:1, // 当前页码
				len:0, // 当前
				all:false, // false请求 true不请求
				size: 8 ,// 每次请求订单数
				startData:{
					clientX:0,
					clientY:0
				}
				// #ifdef H5
				,loginState:false
				// #endif
			}
		},
		onShow() {
			this.loginState = this.getToken(true)
			if(this.getToken(true)){ // 有token再获取数据
				this.resetData()
				this._getOrderList(this.navIndex)
			}else{
				// #ifdef H5
					uni.showModal({
						title: '提示',
						content: '您当前尚未登录，是否登录',
						success:res=> {
							res.confirm?this.showOrHide():''
						}
					})
				// #endif
				// #ifdef MP
					this.token(res => {
						res?this.jump(ParIndex, index):''  // 成功时重新请求
					})
				// #endif
			}
		},
		methods: {
				// #ifdef H5
			showOrHide(){
				this.loginState =!this.loginState
				if(this.loginState){ // 登录后获取数据
					this.resetData()
					this._getOrderList(this.navIndex)
				}
			},
				// #endif
			resetData(){ // 数据重置
				this.page = 1
				this.len = 0
				this.all = false
				this.orderList = []
			},
			_getOrderList(type) {
				if(!this.all){
					type = Number(type)
					getOrderList({status: type,page: this.page,length: this.size}).then(res => {
						if (res.code == 200) {
							this.orderList = [...this.orderList,...res.data.orders]
							this.page = this.page+1
						} else {
							this.all = true
						}
						 uni.stopPullDownRefresh();  //停止下拉刷新动画
					}).catch(err=>{
						uni.showToast({title:'获取订单失败',icon:'none'})
					})
				}
			},
			changeNav(index) { // 导航栏切换
				if(this.navIndex!=index){
					this.navIndex = index
					this.resetData()
					this._getOrderList(index)
				}
			},
			start(e){
				console.log(e)
			    this.startData.clientX=e.changedTouches[0].clientX;  
			    this.startData.clientY=e.changedTouches[0].clientY;
			},
			end(e){ // 滑动结束时触发
			    console.log(e)
			    const subX=e.changedTouches[0].clientX-this.startData.clientX;
			    const subY=e.changedTouches[0].clientY - this.startData.clientY;
			    if(subY>50 || subY<-50){
			        console.log('上下滑')
			    }else{
			        if(subX>100){
			            console.log('右滑')
			        }else if(subX<-100){
			            console.log('左滑')
			        }else{
			            console.log('无效')
			        }
			    }
			},
			_cancelOrder(index, id) { // 取消订单
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认要取消订单吗?',
					success(res) {
						if (res.confirm) {
							cancelOrder(id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功'
									})
									_this.orderList[index].status = 2
									_this._getOrderList(_this.navIndex)
								}
							})
						}
					}
				})
			},
			onReachBottom() { // 上拉加载
				if (!this.all) {
					this.len = 0, // 当前
					this.all = false // false请求 true不请求
					this._getOrderList(this.navIndex)
				}
			},
			onPullDownRefresh() { // 下拉刷新
				this.resetData()
				this._getOrderList(this.navIndex)
			}
		}
	}
</script>

<style>
	.navList{
		position: fixed;
		padding: 0 20rpx;
		background-color: #FAFAFA;
	}
	.box {
		width: 710rpx;
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		padding: 38rpx 0 0rpx;
		border-bottom: 1rpx solid #DFDFDF;
	}

	.box view {
		display: flex;
		padding: 0 24rpx 8rpx 30rpx;
		position: relative;
	}

	.box view.start:after {
		content: '';
		display: inline-block;
		width: 100%;
		height: 6rpx;
		background-color: rgba(200, 155, 78, 1);
		border-radius: 3rpx;
		position: absolute;
		left: 0rpx;
		bottom: -2rpx;
	}

	.end {
		font-size: 28rpx;
		flex: 1;
		margin-top: 40rpx;
		color: rgba(153, 153, 153, 1);
	}

	.listBox {
		width: 750rpx;
		padding-top: 110rpx;
	}

	.MealBox {
		width: 622rpx;
		height: 240rpx;
		background-color: #fff;
		margin: 16rpx 40rpx;
		padding: 0 20rpx 0 28rpx;
		border-radius: 12rpx;
	}


	.top {
		height: 170rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 22rpx;
		border-bottom: 1rpx solid rgba(223, 223, 223, 1);
	}

	.active {
		width: 140rpx;
		height: 40rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		text-align: center;
		background-color: rgba(200, 155, 78, 1);
		margin-top: 24rpx;
		color: white;
		line-height: 36rpx;
	}

	.Name {
		font-size: 46rpx;
		margin-left: 30rpx;
		padding-top: 34rpx;
	}



	.keyword {
		margin-left: 30rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		color: rgba(102, 102, 102, 1);
	}


	.address {
		font-size: 22rpx;
		color: rgba(153, 153, 153, 1);
		margin-left: 30rpx;
		margin-top: 10rpx;

	}

	.cancle {
		width: 140rpx;
		height: 40rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		text-align: center;
		border: 2rpx solid rgba(153, 153, 153, 1);
		margin-top: 46rpx;
		color: rgba(153, 153, 153, 1);
		line-height: 36rpx;
	}
	.noMore{
		text-align: center;
		color: rgba(153, 153, 153, 1);
		padding: 20rpx 0;
	}
</style>
